import React, {Component} from 'react';
import Avatar from 'material-ui/Avatar';
import {List, ListItem} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';
import CommunicationChatBubble from 'material-ui/svg-icons/communication/chat-bubble';
import Paper from 'material-ui/Paper';
import { Scrollbars } from 'react-custom-scrollbars';

import CONFIG from '../../config';

export default class Friends extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFetched: false,
      data: []
    };
  }

  componentWillMount() {
    fetch(CONFIG.apiHost + '/api/friends', {
      method: 'get',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(res => res.json())
    .then(res => {
      
      let arr = [];
      for (var i = 20; i >= 0; i--) {
        arr.push(res.data[0])
      }

      this.setState({isFetched: true, data: arr});
    })
  }

  render() {
  	return (
  	  <div style={styles.container}>
        <div className="center-block" style={{width: 800}}>
          <Paper zDepth={1} style={{height: 600}} className="row">
            <div className="col-md-3" style={{padding: 0, backgroundColor: '#424242'}}>
              <List style={styles.root} >
                <Subheader style={{color: '#fff'}}>所有</Subheader>
                <Scrollbars 
                  autoHide
                  autoHideTimeout={1000}
                  autoHideDuration={200}
                  style={styles.gridList}>
                  {this.state.data.map((item, index) => {
                    return (
                      <div key={index}>
                        <ListItem
                          primaryText={item.userName}
                          style={{color: '#fff'}}
                          leftAvatar={<Avatar src={item.userImg} />}
                        />
                        <Divider style={{backgroundColor: '#616161'}} />
                      </div>
                    );
                  })}
                </Scrollbars>
              </List>
            </div>
            <div style={styles.chatBox} className="col-md-9" style={{padding: 0}}>
              2
            </div>
          </Paper>
        </div>
  	  </div>
  	);
  }
};

const styles = {
  container: {
    marginTop: 88, 
    marginLeft: 24, 
    marginRight: 24,
    marginBottom: 64,
    height: 560
  },
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    // borderRightWidth: 1,
    // borderRightStyle: 'solid',
    // borderRightColor: 'rgb(217, 217, 217)',
    // borderBottom: 'none',
    // backgroundColor: '#fff',
    // width: 360,

  },
  gridList: {
    height: 504
  },
  bottomTear: {
    display: 'block',
    // position: relative;
    // marginTop: -10
    // max-width: 360px;
    // <img style={styles.bottomTear} src="http://localhost:9000/images/bottom-tear.svg" />
  },
  chatBox: {
    // position: 'absolute',
    // top: 0,
    // left: 362,
    // right: 0,
    height: '100%'
  }
};
